var box = document.getElementById('box');
var imgs = document.getElementById('img_box').getElementsByTagName('img');
var numLis = document.getElementById('num_box').getElementsByTagName('li');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
function LunBoFn(){
	this.box = box;
	this.imgs = imgs;
	this.numLis = numLis;
	this.prev = prev;
	this.next = next;
	this.autoNum = 0;
	this.maxNum = this.numLis.length;
	this.timer = null;
	this.spans = document.getElementsByTagName('span');
	this.imgBox = document.getElementById('img_box');
	this.timer2 = null;
}
LunBoFn.prototype.init = function(){
	var self = this;
    for (var i = 0; i < this.numLis.length; i++) {
    	this.numLis[i].index = i;
    	this.numLis[i].onclick = function(){
    	   self.numLis[self.autoNum].className = "";
    	   self.autoNum = this.index;
    	   self.changSrollFn(self.imgBox.scrollLeft,1350*self.autoNum);
    	   self.changLiFn();
    	}
    }
    this.autoFn();
    this.clearFn();
    for (var i = 0; i < self.spans.length; i++) {
    	self.spans[i].index = i;
    	self.spans[i].onclick = function(){
    	    self.numLis[self.autoNum].className = "";
    	    if (this.index) {
    	    	self.autoNum++;
    	    	self.autoNum%=self.maxNum;
    	    }
    	    else{
                self.autoNum--;
                if (self.autoNum<0) {
                	self.autoNum = self.maxNum-1;
                }
    	    }
    	    self.changSrollFn(self.imgBox.scrollLeft,1350*self.autoNum);
    	    self.changLiFn();
    	}
    }

}
LunBoFn.prototype.autoFn = function(){
	var self = this;
	clearInterval(this.timer);
	this.timer = setInterval(function(){
       self.numLis[self.autoNum].className = "";
       self.autoNum++;
       self.autoNum%=self.maxNum;
       self.changSrollFn(self.imgBox.scrollLeft,1350*self.autoNum);
       self.changLiFn();
	},2000);
}
LunBoFn.prototype.changSrollFn = function(start,end){
  if (this.timer2) {
  	clearInterval(this.timer2);
  }
  this.start = start;
  this.end = end;
  this.cishu = 0;
  this.maxCiShu = 20;
  var speed = (this.end-this.start)/this.maxCiShu;
  this.speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
  var self  = this;
  this.timer2 = setInterval(function(){
     self.moveFn();
  },25);
}
LunBoFn.prototype.moveFn = function(){
	this.cishu++;
    this.imgBox.scrollLeft=Tween.Elastic.easeInOut(this.cishu,this.start,(this.end-this.start),this.maxCiShu);
    if (this.cishu==this.maxCiShu) {
    	clearInterval(this.timer2);
    	this.imgBox.scrollLeft=this.end;
    }
}
LunBoFn.prototype.changLiFn = function(){
	 this.numLis[this.autoNum].className = "active";
}
LunBoFn.prototype.clearFn = function(){
	var self = this;
	this.box.onmouseover = function(){
		clearInterval(self.timer);
	}
	this.box.onmouseout = function(){
		self.autoFn();
	}
	window.onblur = function(){
		clearInterval(self.timer);
	}
	window.onfocus = function(){
		self.autoFn();
	}
}
var lunBo = new LunBoFn();
    lunBo.init();